<template>
  <div>
    <el-form :model="form" inline>

      <el-form-item label="仓库类型:">
        <el-select v-model="form.warehouseTypeId" clearable>
          <el-option :label="item.name" :value="item.id" v-for="item in typeList" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="form.status" clearable>
          <el-option label="全部" value="-1" />
          <el-option label="启用中" value="0" />
          <el-option label="禁用中" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button type="primary" @click="NewHouseOnSubmit('新增')" style="margin-left: 30px;">新增仓库</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="table">
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
      border>
      <el-table-column type="selection" width="55" />
      <el-table-column label="类型" width="180">
        <template #default="scope">{{ scope.row.warehouseTypeNames }}</template>
      </el-table-column>
      <el-table-column label="仓库名称" width="180">
        <template #default="scope"> <span class="headclass"
            @click="$router.push(`/home/everyView/warehouseAdd?houseName=${scope.row.name}&id=${scope.row.id}`)">{{
      scope.row.name
    }}</span> </template>
      </el-table-column>
      <el-table-column label="负责人" width="180">
        <template #default="scope">{{ scope.row.receivePersonName }}</template>
      </el-table-column>
      <el-table-column label="仓库收货地址" width="380">
        <template #default="scope">{{ scope.row.warehouseReceiveAddress }}</template>
      </el-table-column>
      <el-table-column label="是否启用" width="120">
        <template #default="scope">{{ scope.row.status === 1 ? '禁用' : '启用' }}</template>
      </el-table-column>
      <el-table-column label="备注" width="180">
        <template #default="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column label="盘货结果">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="SupportExpressDelivery(scope.row)">
            支持快递
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="setExpressDelivery(scope.row, '编辑')">
            编辑
          </el-button>
          <el-button link type="primary" size="small" @click.prevent="delect(scope.row)">
            删除
          </el-button>
          <el-button link type="primary" size="small"
            @click.prevent="$router.push(`/home/everyView/warehouseSeat?wareHouseId=${scope.row.id}`)">
            库位管理
          </el-button>

        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <!-- 支持快递 -->
  <div>
    <el-dialog v-model="SupportExpressDeliveryDialogVisible" width="500">
      <span>
        快递类型来源：<el-select v-model="ExpressTypeSource" clearable @change="warehouseExpressListEvery(id)">
          <el-option :label="item.name" :value="item.id" v-for="item in ExpressTypeSourceTab" :key="item.id">{{
      item.name
    }}</el-option>
        </el-select>
        <div>
          <el-checkbox-group v-model="checkList" @change="ExpressTypeSourceChange">
            <el-checkbox :label="item.name" :value="item.id" v-for="item in warehouseExpressListEveryTable"
              :key="item.id" />
          </el-checkbox-group>
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addExpress">
            保存
          </el-button>
          <el-button @click="SupportExpressDeliveryDialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!-- 编辑 -->
  <div>
    <el-dialog v-model="setExpressDeliveryDialogVisible" width="500">
      <span>
        <el-form :model="setWareHouseform" label-width="auto" style="max-width: 600px">
          <el-form-item label="仓库名称：">
            <el-input v-model="setWareHouseform.name" clearable />
          </el-form-item>
          <el-form-item label="收件人姓名：">
            <el-input v-model="setWareHouseform.receivePersonName" clearable />
          </el-form-item>
          <el-form-item label="收件人电话：">
            <el-input v-model="setWareHouseform.receivePersonPhone" clearable />
          </el-form-item>
          <el-form-item label="仓库收货省市区：" style="display: flex">
            <el-select v-model="receiveProvinceId" placeholder="省" style="width: 80px;" clearable value-key="id"
              @change="sysPcaDataListSelect(receiveProvinceId, '市', item)">
              <el-option :label="item.name" :value="item" v-for="item in province" :key="item.id" />
            </el-select>
            <el-select v-model="receiveCityId" placeholder="市" style="width: 80px;" clearable value-key="id"
              @change="sysPcaDataListSelect(receiveCityId, '区')">
              <el-option :label="item.name" :value="item" v-for="item in citys" :key="item.id" />
            </el-select>
            <el-select v-model="receiveAreaId" placeholder="区" style="width: 80px;" clearable value-key="id">
              <el-option :label="item.name" :value="item" v-for="item in districts" :key="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库收货详细地址：">
            <el-input v-model="setWareHouseform.receiveDetailAddress" />
          </el-form-item>
          <el-form-item label="关键字：">
            <el-input v-model="setWareHouseform.keyWord" />
          </el-form-item>
          <el-form-item label="适用类型：">
            <el-checkbox-group v-model="checkListType">
              <el-checkbox :label="item.id" :value="item.id" v-for="item in typeListNew" :key="item.id">{{ item.name
                }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="状态：">
            <div>
              <label>
                <input type="radio" :value="0" v-model="setWareHouseform.status"> 启用
              </label>
              <label>
                <input type="radio" :value="1" v-model="setWareHouseform.status"> 禁用
              </label>
            </div>
          </el-form-item>
          <el-form-item>
            <div style="display: flex;justify-content: space-between;width: 70%;margin:0 auto">
              <el-button type="primary" @click="onSubmitCompile">保存</el-button>
              <el-button @click="setExpressDeliveryDialogVisible=false">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </span>
      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addExpress">
            保存
          </el-button>
          <el-button @click="setExpressDeliveryDialogVisible = false">取消</el-button>
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { ElMessage } from 'element-plus'
import { getWarehouseTypeDownList, warehouseList, warehouseUpdate, getExpressTypeList, warehouseExpressList, warehouseExpressCreate, getShopExpressTypeId, sysPcaDataList, warehouseDelete, warehousecreate, warehousedetail } from '@/api/index'
// import AddressParse from 'address-parse'
// do not use same name with ref
const form = ref({
  pageSize: 10,
  pageNum: 1,
  warehouseTypeId: -1,
  status: '-1'
})
const typeList = ref([])
const typeListNew = ref([])
const tableData = ref([])
// 类型
const warehouseTypeList = () => {
  getWarehouseTypeDownList().then(res => {
    const { data: { data } } = res
    typeList.value = data
    typeListNew.value = [...data]
    typeListNew.value.shift()
  })
}
// 快递类型来源下拉列表
const expressTypeList = () => {
  getExpressTypeList().then(res => {
    const { data: { data } } = res
    ExpressTypeSourceTab.value = data
    getShopExpressTypeId({ id: id.value }).then(res => {
      console.log(res)
      const { data: { data } } = res
      ExpressTypeSource.value = data.id
    })
  })
}
// 仓库支持商铺快递平铺列表
const warehouseExpressListEveryTable = ref([])
const checkList = ref([])
const checkListId = ref([])
const warehouseExpressListEvery = (id) => {
  warehouseExpressListEveryTable.value = []
  checkList.value = []
  warehouseExpressList({
    warehouseId: id,
    expressTypeId: ExpressTypeSource.value
  }).then(res => {
    const { data: { data } } = res
    warehouseExpressListEveryTable.value = data
    data.forEach(e => {
      if (e.isUse === 1) {
        checkList.value.push(e.name)
      }
    })
  })
}
const ExpressTypeSourceChange = () => {
  checkListId.value = []
  warehouseExpressListEveryTable.value.forEach(el => {
    const a = checkList.value.includes(el.name)
    if (a) {
      checkListId.value.push(el.id)
    }
  })
}
onBeforeMount(() => {
  warehouseTypeList()
  getList()
})
const onSubmit = () => {
  getList()
}
const getList = () => {
  warehouseList(form.value).then(res => {
    const { data: { data } } = res
    total.value = data.total
    tableData.value = data.list
  })
}
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  form.value.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  form.value.pageNum = val
  getList()
}

// table
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
// 支持快递
const id = ref('')
const ExpressTypeSource = ref('-1')
const ExpressTypeSourceTab = ref([])
const SupportExpressDeliveryDialogVisible = ref(false)
const SupportExpressDelivery = (row) => {
  SupportExpressDeliveryDialogVisible.value = true
  expressTypeList()
  id.value = row.id
  warehouseExpressListEvery(id.value)
}
// 保存快递
const addExpress = () => {
  warehouseExpressCreate({
    warehouseId: id.value,
    expressTypeId: ExpressTypeSource.value,
    shopExpressIds: checkListId.value
  }).then(res => {
    ElMessage.success('操作成功')
    SupportExpressDeliveryDialogVisible.value = false
    getList()
  })
}
// 编辑
const setWareHouseform = ref({
  status: '1',
  id: '',
  keyWord: ''
})
const receiveProvinceId = ref('')
const receiveCityId = ref('')
const receiveAreaId = ref('')
const checkListType = ref([])
const setExpressDeliveryDialogVisible = ref(false)
const setExpressDelivery = (row, names) => {
  nameTypes.value = names
  warehousedetail({ id: row.id }).then(res => {
    console.log('res')
    const { data: { data } } = res

    setWareHouseform.value.id = data.id
    setWareHouseform.value.name = data.name
    setWareHouseform.value.receivePersonName = data.receivePersonName
    setWareHouseform.value.receivePersonPhone = data.receivePersonPhone
    setWareHouseform.value.status = data.status
    setWareHouseform.value.keyWord = data.keyWord
    setWareHouseform.value.receiveDetailAddress = data.receiveDetailAddress
    setWareHouseform.value.warehouseTypeIds = data.warehouseTypeIds
    const receiveProvince = { id: data.receiveProvinceId, name: data.receiveProvinceName }
    const receiveCity = { id: data.receiveCityId, name: data.receiveCityName }
    const receiveArea = { id: data.receiveAreaId, name: data.receiveAreaName }
    receiveProvinceId.value = receiveProvince
    receiveCityId.value = receiveCity
    receiveAreaId.value = receiveArea
    citys.value.push(receiveCity)
    districts.value.push(receiveArea)

    const a = data.warehouseTypeIds.split(',')
    console.log(a)
    const b = []
    a.forEach(e => {
      b.push(Number(e))
    })
    checkListType.value = b
    // a.forEach(items => {
    //   console.log(typeListNew.value)
    //   for (let index = 0; index < typeListNew.value.length; index++) {
    //     if (items === typeListNew.value[index].name) {
    //       checkListType.value.push(typeListNew.value[index].id)
    //     }
    //   }
    // })
  })
  // const result = AddressParse.parse(row.warehouseReceiveAddress)

  sysPcaDataListSelect({ id: 0 }, '省')
  setExpressDeliveryDialogVisible.value = true
}

// 省市
const province = ref([])
const citys = ref([])
const districts = ref([])
const sysPcaDataListSelect = (val, name, item) => {
  console.log(val)
  sysPcaDataList(val.id).then(res => {
    console.log(res)
    const { data: { data } } = res
    if (name === '省') {
      province.value = data
    } else if (name === '市') {
      citys.value = data
    } else if (name === '区') {
      districts.value = data
    }
  })
}
// 删除仓库
const delect = (row) => {
  warehouseDelete({ id: row.id }).then(res => {
    ElMessage.success('操作成功')
  })
}
const onSubmitCompile = () => {
  // setWareHouseform.value.keyWord = setWareHouseform.value.keyWord
  setWareHouseform.value.warehouseTypeIds = checkListType.value
  setWareHouseform.value.receiveProvinceId = receiveProvinceId.value.id
  setWareHouseform.value.receiveCityId = receiveCityId.value.id
  setWareHouseform.value.receiveAreaId = receiveAreaId.value.id
  setWareHouseform.value.receiveProvinceName = receiveProvinceId.value.name
  setWareHouseform.value.receiveCityName = receiveCityId.value.name
  setWareHouseform.value.receiveAreaName = receiveAreaId.value.name
  if (nameTypes.value === '新增') {
    warehousecreate(setWareHouseform.value).then(res => {
      ElMessage.success('操作成功')
      setExpressDeliveryDialogVisible.value = false
    })
  } else if (nameTypes.value === '编辑') {
    warehouseUpdate(setWareHouseform.value).then(res => {
      ElMessage.success('操作成功')
      setExpressDeliveryDialogVisible.value = false
    })
  }
}
const nameTypes = ref('')
const NewHouseOnSubmit = (row) => {
  nameTypes.value = row
  setWareHouseform.value = {
    status: '1',
    id: '',
    keyWord: ''
  }
  sysPcaDataListSelect({ id: 0 }, '省')
  setExpressDeliveryDialogVisible.value = true
}
</script>

<style lang='less' scoped></style>
